{% extends "_layouts/examples.html" %}
{% block title %}Grid / Offset columns{% endblock %}

{% block standalone_css %}patterns_grid-8{% endblock %}

{% block content %}
<div class="grid-row grid-demo">
  <div class="grid-col-small-3 grid-col-medium-3 grid-col-5
    grid-col-start-small-2 grid-col-order-small-2
    grid-col-start-medium-1 grid-col-order-medium-1
    grid-col-start-large-4 grid-col-order-large-2">
    <p>
      .grid-col-small-3 .grid-col-medium-3 .grid-col-5<br>
      .grid-col-start-small-2 .grid-col-order-small-2<br>
      .grid-col-start-medium-1 .grid-col-order-medium-1<br>
      .grid-col-start-large-4 .grid-col-order-large-2
    </p>
  </div>

  <div class="grid-col-small-1 grid-col-medium-1 grid-col-3
    grid-col-start-small-1 grid-col-order-small-1
    grid-col-start-medium-4 grid-col-order-medium-2
    grid-col-start-large-1 grid-col-order-large-1">
    <p>
      .grid-col-small-1 .grid-col-medium-1 .grid-col-3<br>
      .grid-col-start-small-1 .grid-col-order-small-1<br>
      .grid-col-start-medium-3 .grid-col-order-medium-2<br>
      .grid-col-start-large-1 .grid-col-order-large-1
    </p>
  </div>
</div>

{% endblock %}
